{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <link rel="stylesheet" href="{% static '/layui/css/layui.css' %}">
</head>

<body>
    <h4>在所有屏幕尺寸下都生效，栅格布局该怎么写？</h4>
    <div class="layui-row">
        <div class="layui-col-xs6" style="background: red;">
            <div class="grid-demo grid-demo-bg1">6/12</div>
        </div>
        <div class="layui-col-xs6" style="background: green;">
            <div class="grid-demo">6/12</div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">3/12</div>
        </div>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th>编号</th>
                <th>头像</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1001</td>
                <td>图片</td>
                <td>安信工</td>
                <td>10</td>
                <td>老师</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>图片</td>
                <td>安信工</td>
                <td>10</td>
                <td>老师</td>
            </tr>
        </tbody>
    </table>

    <p>将github的图标放大</p>
    <i class="layui-icon layui-icon-github"></i>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">验证必填项</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
    </form>
    <!-- HTML Content -->
    <script src="./layui/layui.js"></script>
    <script>
        // Usage
        layui.use(function () {
            var layer = layui.layer;
            // Welcome
            layer.msg('Hello World', { icon: 6 });
        });
    </script>
    <script>
        var sum = num1 => num1 + '1'

        var log = (x, y = 'World') => {
            console.log(x, y);
        }

        var arr = [99, 28, 3, 4];
        // var res = []
        // for (const element of arr) {
        //     res.push(element)
        // }
        // console.log(res);

        //TODO: 每个元素的值增加10
        var arr1 = arr.map((value, index, array) => value + 10)
        console.log(arr1);

        //找出数组中第一个小于 0 的成员。
        var res2 = [8, -4, -5, 10].filter((value, index, array) => value < 0)
        // console.log(res2);

        var users = [
            { name: '张含韵', "email": "zhang@email.com" },
            { name: "江一燕", "email": "jiang@email.com" },
            { name: "李小璐", "email": "lixiaolu@email.com" },
            { name: "铁拐李", "email": "tiguaili@email.com" },
        ];
        
        var res3 = users.filter((val, index) => /li/.test(val.email))
        console.log(res3);
        

    </script>
</body>

</html>